<template>
    <div class="cardAll">
        <el-card id="staGenderCard" class="box-card"  :style="{width: '400px', height: '400px',padding:'20px'}">

        </el-card>
        <el-card id="staDepartmentCard" class="box-card"  :style="{width: '400px', height: '400px',padding:'20px'}">

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "StaAll",
        data(){
            return{
                option:{
                    title: {
                        text: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',

                    },
                    series: [
                        {
                            name:'',
                            type: '',
                            radius: '65%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data: [
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }

            }
        },
        methods:{
            initgender(){
                this.getRequest("/statistics/all/gender").then(resp=>{
                    if (resp){
                        this.option.title.text=resp.msg;
                        this.option.series[0].data=resp.data;
                        this.option.series[0].name="性别"
                        this.option.series[0].type='pie'
                        var myChart = this.echarts.init(document.getElementById('staGenderCard'));
                        myChart.setOption(this.option);
                        this.initDepartment();
                    }
                })
            },
            initDepartment(){
                this.getRequest("/statistics/all/department").then(resp=>{
                    if (resp){
                        this.option.title.text=resp.msg;
                        this.option.series[0].data=resp.data;
                        this.option.series[0].name="部门人数"
                        this.option.series[0].type='pie'
                        var myChart = this.echarts.init(document.getElementById('staDepartmentCard'));
                        myChart.setOption(this.option);
                    }
                })
            }
        },
        mounted() {
            this.initgender();
        }
    }
</script>

<style>
    .cardAll{
        display: flex;
        justify-content: space-around;
    }

</style>